<template>
	<view class="sure-order">
		<LineBorder />
		<view class="adress-out" @click="goPath">
			<template v-if="path">
				<view class="title">
					<view class="name">
						收货人 ：{{path.name}}
					</view>
					<view class="tel">
						{{path.tel}}
					</view>
				</view>
				<view class="adress">
					收货地址：{{path.city}}{{path.details}}
				</view>
			</template>
			<template v-else>
				<view class="choose-path">
					请选择地址
				</view>
			</template>
		</view>
		<view class="goods-list">
			<view class="goods-item" v-for="(item,index) in goodsList" :key="index">
				<image :src="item.imgUrl" mode='aspectFit' class="img" />
				<view class="main-txt">
					<view class="title">
						{{item.name}}
					</view>
					<view class="size">
						{{item.color}}；{{item.size}}
					</view>
				</view>
				<view class="">
					<view class="">
						¥{{item.price}}
					</view>
					<view class="">
						*{{item.num}}
					</view>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<view class="foot">
			<view class="total">
				合计：<text>￥{{totalCount.price}}</text>
			</view>
			<view class="confirm" @click="goPayment">
				提交订单
			</view>
		</view>
	</view>
</template>

<script>
	import LineBorder from '@/components/common/LineBorder.vue';
	import {
		mapGetters,
		mapState,
		mapMutations
	} from 'vuex';
	import http from '@/common/api/reqeust.js';

	export default {
		data() {
			return {
				path: {},
				// 选中的id集合
				selectIds: []
			}
		},
		components: {
			LineBorder
		},
		methods: {
			...mapMutations(['_initAddress']),
			// 请求收获地址
			initAddress() {
				http.request({
					url: '/api/selectAddress',
					method: 'post',
					data: {
						phone: this.userInfo.phone
					}
				}).then(res => {
					this._initAddress(res)
					if (this.defaltPath.length) {
						this.path = this.defaltPath[0]
					}
				}).catch(() => {
					uni.showToast({
						title: '请求失败',
						icon: 'error'
					})
				})
			},
			// 新增地址页面
			goPath() {
				uni.navigateTo({
					url: '/pages/deliveryAddress/deliveryAddress?type=selectPath',
				})
			},
			// 提交订单
			goPayment() {
				if (!this.path) {
					return uni.showToast({
						title: '请选择收货地址',
						icon: 'none'
					})
				}
				http.request({
					url: '/api/submitOrder',
					method: 'post',
					data: {
						phone: this.userInfo.phone,
						orderId: this.orderNumber, //订单号
						shopIds: JSON.stringify(this.selectedList) //选择产品的id集合
					}
				}).then(res => {
					if (res.success) {
						let newName = []
						this.goodsList.forEach(v => {
							newName.push(v.name)
						})
						uni.navigateTo({
							url: `/pages/payment/payment?data=${JSON.stringify({price:this.totalCount.price,
							goodsName:newName})}`
						})
					}
				}).catch(() => {
					uni.showToast({
						title: '请求失败',
						icon: 'error'
					})
				})

			}
		},
		computed: {
			...mapState({
				list: state => state.cart.list,
				userInfo: state => state.user.userInfo,
				orderNumber: state => state.order.orderNumber,
				selectedList: state => state.cart.selectedList
			}),
			...mapGetters(['defaltPath', 'totalCount']),
			// 选中的id集合在购物车列表中筛选id一样的
			goodsList() {
				return this.selectIds.map(id => {
					return this.list.find(v => v.id == id)
				})
			}
		},
		onLoad(e) {
			// 初始化拿到收货地址
			this.initAddress()
			// 初始化拿到结算的id集合
			this.selectIds = JSON.parse(e.ids)
			// 监听事件
			uni.$on('selectPathItem', (res) => {
				this.path = res
			})
		},
		// 移除事件
		onUnload() {
			uni.$off('selectPathItem', () => {})
		}
	}
</script>

<style lang="scss" scoped>
	.sure-order {
		.adress-out {
			padding: $pd20;
			background-color: #fff;

			.choose-path {
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.title {
				display: flex;
				justify-content: space-between;

				.name {
					font-weight: bold;
				}
			}
		}

		.goods-list {
			margin-top: $pd20;

			.goods-item {
				background-color: #f7f7f7;
				padding: 10rpx $pd20;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: $pd20;

				.img {
					width: 160rpx;
					height: 160rpx;
				}

				.main-txt {
					padding: 0 10rpx;

					.size {
						font-size: 24rpx
					}
				}
			}
		}

		.foot {
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			background-color: #fff;
			padding: $pd20;

			.total {
				padding: 0 20rpx;
			}

			.confirm {
				padding: 10rpx 20rpx;
				color: #fff;
				background-color: red;
				border-radius: $border-commom;
				text-align: center;
				margin-right: $pd20;
			}
		}
	}
</style>
